<template> 
    <el-dialog
        title="3D小场景"
        :visible.sync="visible"
        fullscreen=true
        @close="handleCancel"
        class="sceen3DSetting"
    >
        <el-container>
            <el-aside width="70%">
                <sceen3d :config='formData' v-if="proview"></sceen3d>
            </el-aside>
            <el-main>
                <el-form :model="formData" :rules="rules" ref="sceen3DForm" label-width="150px">
                    <el-form-item label="appID" prop="appID">
                        <el-input v-model="formData.appID"></el-input>
                    </el-form-item>
                    <el-form-item label="accessToken" prop="accessToken">
                        <el-input v-model="formData.accessToken"></el-input>
                    </el-form-item>
                    <el-form-item label="baseUrl" prop="baseUrl">
                        <el-input v-model="formData.baseUrl"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleOk">立即创建</el-button>
                        <el-button @click="handleCancel">取消</el-button>
                        <el-button @click="setProview">预览</el-button>
                    </el-form-item>
                </el-form>
            </el-main>
        </el-container>
        
    </el-dialog>
</template>

<script>
import sceen3d from "../components/sceen3D.vue"
export default {
    components:{
        sceen3d
    },
    props: {
        visible: Boolean,
        config: Object,
        model: String
    },
    data(){
        return {
            type: 'sceen3d',
            formData: {
                appID: '',//'61c985234340b752a546d6d7',//'61cda264838a6d340c8a5b0a',
                accessToken: '',//'PrUM8Hf5KYc4QnLEDtPH1edGNwF8Mew3P.tJc5I3LEmws2SQF.vSjmuPfONB0N1Fh-jZglqYdC0YvnAkz0GWf2yNKRA8huJkpR5tazQXN88u.tZ5t1TIimBQS0Fkjm3u',//'VJeP5IuedS3M5-xjevGqC0C7d9HNwfZzxp8O17zJ0op3QJ209LeimEjAhLx4EPEWOVKvph3I-12-g0UMTDauI9RYMKGvHfL7hWNV00hWu8LO4VLMQMupBvSBvyo7rgV.',
                baseUrl: '',//'http://mapchang.com',//'http://localhost',
                id: this.createId()
            },
            proview: false,
            rules: {
                appID: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' }
                ],
                accessToken: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' }
                ],
                baseUrl: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' }
                ],
            }
        }
    },
    mounted(){
        if(this.$props.model === 'update'){
            this.formData.appID = this.$props.config.appID
            this.formData.accessToken = this.$props.config.accessToken
            this.formData.baseUrl = this.$props.config.baseUrl
            this.formData.id = this.$props.config.id
        }
    },
    methods:{
        close(){
            this.$emit('close', this.type)
        },
        save(params){
            this.$emit('save', this.type, this.$props.model, params)
        },
        createId(){
            return Number(Math.random().toString().substr(3,length) + Date.now()).toString(36);
        },
        setProview(){
            // this.proview = true
            this.proview = false;
            this.$nextTick(() => {
                this.proview = true
            })
        },
        handleOk(){
            let _this = this
            this.$refs['sceen3DForm'].validate((valid) => {
                if (valid) {
                    _this.save(_this.formData)
                    _this.close()
                } else {
                    return false;
                }
            });
            
        },
        handleCancel(){
            this.close()
        },
    }
    
}
</script>

<style>
.sceen3DSetting .el-dialog__body{
    padding: 0px;
}
.sceen3DSetting .el-aside{
    border-right: 1px solid #e0e0e0;
}
.sceen3DSetting .el-container{
    height: 100%;
}
</style>